

<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">文章管理</span>
    <el-button type="primary" @click="dialogVisible = true" style="float: right;margin-top:10px;">发表文章</el-button>
  </div>
  <!-- 新建文章弹窗 -->
  <el-dialog title="新建文章" style="width: 1000px;padding:40px;" v-model="dialogVisible">
    <el-form label-width="80px" label-position="top">
      <!-- 基础内容信息 -->
      <el-form-item label="标题">
        <el-input v-model="article.title" placeholder="请输入标题" required></el-input>
      </el-form-item>
      <el-form-item label="正文内容">
        <el-input type="textarea" v-model="article.content" placeholder="请输入正文内容" required></el-input>
      </el-form-item>
      <el-form-item label="摘要/导语">
        <el-input type="textarea" v-model="article.summary" placeholder="请输入摘要/导语"></el-input>
      </el-form-item>
      <el-form-item label="分类/栏目">
        <el-select v-model="article.category" placeholder="请选择分类/栏目" required>
          <el-option label="技术" value="tech"></el-option>
          <el-option label="生活" value="life"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-input v-model="article.tags" placeholder="请输入标签，多个标签用逗号分隔"></el-input>
      </el-form-item>

      <!-- 媒体信息 -->
      <el-form-item label="封面图/缩略图">
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleCoverImageSuccess" :before-upload="beforeCoverImageUpload">
          <el-button type="primary">上传封面图</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="正文插图">
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleContentImageSuccess" :before-upload="beforeContentImageUpload" multiple>
          <el-button type="primary">上传正文插图</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="附件">
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleAttachmentSuccess" :before-upload="beforeAttachmentUpload">
          <el-button type="primary">上传附件</el-button>
        </el-upload>
      </el-form-item>

      <!-- 发布设置 -->
      <el-form-item label="作者">
        <el-input v-model="article.author" placeholder="请输入作者" required></el-input>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="article.publishTime" type="datetime" placeholder="选择发布时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="article.status" placeholder="请选择状态" required>
          <el-option label="草稿" value="draft"></el-option>
          <el-option label="待审核" value="pending"></el-option>
          <el-option label="已发布" value="published"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公开性">
        <el-select v-model="article.visibility" placeholder="请选择公开性">
          <el-option label="公开" value="public"></el-option>
          <el-option label="密码保护" value="password"></el-option>
          <el-option label="私密" value="private"></el-option>
        </el-select>
      </el-form-item>

      <!-- SEO 优化 -->
      <el-form-item label="自定义 URL">
        <el-input v-model="article.customUrl" placeholder="请输入自定义 URL"></el-input>
      </el-form-item>
      <el-form-item label="Meta 标题">
        <el-input v-model="article.metaTitle" placeholder="请输入 Meta 标题"></el-input>
      </el-form-item>
      <el-form-item label="Meta 描述">
        <el-input type="textarea" v-model="article.metaDescription" placeholder="请输入 Meta 描述"></el-input>
      </el-form-item>
      <el-form-item label="关键词">
        <el-input v-model="article.keywords" placeholder="请输入关键词，多个关键词用逗号分隔"></el-input>
      </el-form-item>

      <!-- 高级功能 -->
      <el-form-item label="关联推荐">
        <el-select v-model="article.relatedArticles" multiple placeholder="请选择关联文章">
          <el-option v-for="item in relatedArticles" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评论设置">
        <el-switch v-model="article.commentsEnabled" active-text="开启" inactive-text="关闭"></el-switch>
      </el-form-item>
      <el-form-item label="多语言版本">
        <el-select v-model="article.language" placeholder="请选择语言">
          <el-option label="中文" value="zh"></el-option>
          <el-option label="英文" value="en"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="同步到社交媒体">
        <el-checkbox-group v-model="article.socialMedia">
          <el-checkbox label="Twitter"></el-checkbox>
          <el-checkbox label="Facebook"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="统计跟踪">
        <el-input v-model="article.trackingCode" placeholder="请输入统计跟踪代码"></el-input>
      </el-form-item>

      <!-- 审核与日志 -->
      <el-form-item label="审核人">
        <el-select v-model="article.reviewer" placeholder="请选择审核人">
          <el-option v-for="item in reviewers" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改记录">
        <el-input type="textarea" v-model="article.modificationLog" placeholder="请输入修改记录"></el-input>
      </el-form-item>
      <el-form-item label="备注/批注">
        <el-input type="textarea" v-model="article.notes" placeholder="请输入备注/批注"></el-input>
      </el-form-item>
    </el-form>
    <!-- 提交按钮 -->
    <template #footer>
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="submitArticle">保存</el-button>
    </template>

  </el-dialog>

  <!-- 文章搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="书名">
        <el-input placeholder="请输入书名" style="width:220px;"></el-input>
      </el-form-item>
      <el-form-item label="作者" style="width:290px;">
        <el-input placeholder="请输入作者" style="width:220px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" v-model="searchArticles">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 文章列表表格 -->
  <el-card style="margin: 20px;">
    <el-table :data="articleArr" style="width: 100%">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="标题" prop="title" align="center"></el-table-column>
      <el-table-column label="内容" prop="content" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="作者" prop="author" align="center"></el-table-column>
      <el-table-column label="发布时间" prop="publishTime" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.publishTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status === 'published' ? 'success' : 'info'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updatedAt" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.updatedAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editArticle(scope.row)">编辑</el-button>
          <el-button link type="primary" @click="deleteArticle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";








// 定义变量控制弹窗是否出现
const dialogVisible = ref(false);

// 定义文章对象
const article = ref({
  title: '',
  content: '',
  summary: '',
  category: '',
  tags: '',
  coverImage: '',
  contentImages: [],
  attachments: [],
  author: '',
  publishTime: '',
  status: '',
  visibility: '',
  customUrl: '',
  metaTitle: '',
  metaDescription: '',
  keywords: '',
  relatedArticles: [],
  commentsEnabled: true,
  language: '',
  socialMedia: [],
  trackingCode: '',
  reviewer: '',
  modificationLog: '',
  notes: ''
});

// 定义关联文章和审核人数据
const relatedArticles = ref([
  { id: 1, title: '文章1' },
  { id: 2, title: '文章2' }
]);

const reviewers = ref([
  { id: 1, name: '审核人1' },
  { id: 2, name: '审核人2' }
]);
// 定义文章列表数据
const articleArr = ref([]);

// 定义搜索参数
const searchParams = ref({
  title: '',
  author: ''
});

// 加载文章列表
const loadArticles = async () => {
  try {
    const response = await axios.get(BASE_URL + '/v1/article/list', {
      params: searchParams.value
    });
    if (response.data.code === 2000) {
      articleArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  } catch (error) {
    ElMessage.error('加载文章列表失败，请稍后重试');
  }
};

// 查询文章
const searchArticles = () => {
  loadArticles();
};

// 重置搜索条件
const resetSearch = () => {
  searchParams.value = {
    title: '',
    author: ''
  };
  loadArticles();
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return '';
  return new Date(date).toLocaleString();
};

// 编辑文章
const editArticle = (article) => {
  // 跳转到编辑页面或打开编辑弹窗
  console.log('编辑文章:', article);
};

// 删除文章
const deleteArticle = async (id) => {
  try {
    const response = await axios.delete(BASE_URL + `/v1/article/delete/${id}`);
    if (response.data.code === 2000) {
      ElMessage.success('删除成功！');
      loadArticles(); // 重新加载文章列表
    } else {
      ElMessage.error(response.data.msg);
    }
  } catch (error) {
    ElMessage.error('删除失败，请稍后重试');
  }
};

// 初始化加载文章列表
onMounted(() => {
  loadArticles();
});

</script>
<style scoped>

</style>